import React from 'react'
import ReactDOM from 'react-dom'
import { FileUpload, Modal } from '../'
//import ReactImageCrop from 'react-image-crop'
import { ImageCrop } from 'sq-ui'
import 'react-image-crop/dist/ReactCrop.css'
import style from './style'
import css from 'component-css'
import util from '../../util'
import cx from 'classnames'
import {FieldContainer, FieldBox} from '../form'

export default
class extends React.Component {

  // 取消上传后，重置为上一张图片
  prevImageStyle = {}

  // 上传的图片
  file={}

  init = {
    dialog: false,
    file: '',
    imageStyle: {}
  }
  
  state = this.init

  toggle() {
    this.setState({
      dialog: !this.state.dialog
    })
  }

  closeDialog() {
    this.toggle()
    if (!util.isNull(this.prevImageStyle)) {
      this.setState({
        imageStyle: this.prevImageStyle
      })
    } else {
      this.upload.reset()
    }
  }

  handleChange(item) {
    this.file = item
    var reader = new FileReader()
    reader.onload = e => {
      this.setState({
        file: e.target.result,
        dialog: true
      })
    }
    reader.readAsDataURL(item.file)
  }

  setCrop() {
    let { x, y, width, height } = this.state.crop

    this.setState({
      imageStyle: {
        backgroundPosition: `${x}% ${y}%`,
        backgroundSize: `${this.props.width/(width/100)}px auto`,
        backgroundRepeat: 'no-repeat',
        backgroundImage: `url(${this.file.dataURL})`,
      }
    })
  }

  handleRequestUpload() {
    const { x, y, width } = this.state.crop
    this.setCrop();
    this.toggle()
    this.props.onUpload({
      x,
      y,
      e: width,
      file: this.file
    })
  }

  setPrev(props) {
    props = props || this.props
    const el = ReactDOM.findDOMNode(this.upload)
    const { width } = el.querySelector('a').getBoundingClientRect()
    this.prevImageStyle = {
      ...util.crop(props.file, width),
      backgroundImage: `url(${props.file})`,
      //backgroundSize: 'cover',
    }
    this.setState({
      imageStyle: {
        ...this.prevImageStyle,
      }
    })
  }

  componentDidMount() {
    this.upload = this.refs.upload
    if (this.props.file) {
      this.setPrev()
    }
  }

  componentWillReceiveProps(props) {
    if (!this.props.file && props.file) {
      this.setPrev(props)
    }
  }

  render() {
    const {
      label,
      name,
      placeholder,
      required,
    } = this.props;
    return (
        <div className={cx({
          [this.props.className]: this.props.className
        })}>
          <FileUpload
            img
            ref="upload"
            file={this.props.file}
            imageStyle={this.state.imageStyle}
            imageLabel={placeholder || '上传图片'}
            label={this.props.label}
            onChange={::this.handleChange}
          />
          <Modal
            close
            className={style.dialog}
            active={this.state.dialog}
            onRequestClose={::this.closeDialog}
            actions={[
              {
                handler: ::this.handleRequestUpload,
                label: '确定'
              }
            ]}
          >
            <div>
              <div data-role="dialog-title">选择上传区域</div>
              <ImageCrop
                className={style['crop-image']}
                src={this.state.file}
                onChange={crop =>{
                  this.setState({
                    crop,
                  })
                }}
              />
            </div>
          </Modal>
        </div>
    )
  }
}
